<template>
  <div>
    <el-card class="operator-button-card">
      <template #header>
        <div class="flex justify-between items-center">
          <h2 class="operator-button-label">{{ $t('operator.level') }}</h2>
            <el-button
              v-if="isAuth('10400202.MANAGE') && required !== null"
              type="primary"
              size="small"
              :loading="btnLoading"
              @click="ClickHandle"
              >{{ $t('common.save') }}</el-button
            >
        </div></template
      >

      <el-form ref="form" class="center" label-width="195px" style="margin-left: 165px;font-weight: 500;">
        <el-form-item :label="$t('operator.level') + ':'">
          <el-radio v-model="required" :label="0" @change="changeRequired">{{
            $t('operator.low')
          }}</el-radio>
          <el-radio v-model="required" :label="1" @change="changeRequired">{{
            $t('operator.high')
          }}</el-radio>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getUserLevel, setUserLevel } from '@/api/operator'
import { isAuth } from '@/utils'

export default {
  name: 'UserLevel',
  props: {
    operatorId: Number
  },
  data() {
    return {
      required: null,
      btnLoading: false,
      downloadConfigForm: {
        tomsDownloadTransferPath: '',
        appStoreDownloadTransferPath: '',
        appStoreResourceTransferPath: '',
        paramPlatformDownloadTransferPath: ''
      },
      tomsDownloadTransferPathList: [],
      appStoreDownloadTransferPathList: [],
      paramPlatformDownloadTransferPathList: [],
      appStoreResourceTransferPathList: []
    }
  },
  created() {
    this.getUserLevel()
  },
  methods: {
    isAuth,
    ClickHandle() {
      this.$confirm(this.$t('operator.save_cfg'), this.$t('page.tip'), {
        confirmButtonText: this.$t('page.confirm'),
        cancelButtonText: this.$t('page.cancel'),
        type: 'warning'
      }).then(() => {
        this.btnLoading = true
        setUserLevel(this.operatorId, this.required)
          .then((res) => {
            this.btnLoading = false
            console.log('setUserLevel')
            console.log(res)
            this.$message({
              type: 'success',
              message: this.$t('common.success')
            })
          })
          .catch((e) => {
            this.btnLoading = false
            this.$confirmError(e)
          })
      })
    },
    getUserLevel() {
      getUserLevel(this.operatorId)
        .then((res) => {
          this.required = res
        })
        .catch(this.$confirmError)
    }
  }
}
</script>

<style lang="scss" scoped>
.l-card {
  margin: 20px 36px;
}
</style>
